iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧系列 第 27

[想試試看JavaScript ] 陣列一些操作陣列好用的方法 map

  • 分享至 

  • xImage
  •  

之前介紹的方法 push、pop、shift、unshift、reverse、splice、sort、fill
方法,都會修改到原來的陣列

現在介紹一些會產生新陣列的方法


產生新的陣列或新的值

map()

map 看起來好像是英文中地圖的意思,不過應該是採英文中映射的意思

map 跟 forEach 一樣會將陣列中的元素一個一個傳進指定的 callback 函式運算。

不同的是,map 會回傳一個新陣列,並將 callback 函式的運算結果放在這個新陣列,原陣列不會做更改。

語法:

map() 小括弧裡面會放一個 callback 函式,函式內有三個參數

  1. currentValue,陣列中正在被處理的元素,也就是正在被傳進 callback 函式的元素
  2. index,正在被處理的元素的索引值
  3. array,呼叫 map 方法的原陣列
var new_Array=Array.map(function callback(currentValue,index,array){
	// return 要放在新陣列的元素
})

範例:

原本的陣列 a 不會被修改,而是產生新陣列傳進變數 b 中

var a=[1,2,3,4,5,6,7,8];
var b=a.map(function(currentValue){
	return currentValue+10
});
console.log(a); // [1,2,3,4,5,6,7,8]
console.log(b); // [11,12,13,14,15,16,17,18]

map 回傳的新陣列 b 的內容,在 map 的時候就決定了

所以之後再修改陣列 a ,也不會因為 map 影響到陣列 b 的內容

var a=[1,2,3,4,5,6,7,8];
var b=a.map(function(e){
    return e+10;
})
console.log(a); // [1,2,3,4,5,6,7,8]
console.log(b);
a.push(9);
console.log(a); // [1,2,3,4,5,6,7,8,9]
console.log(b); // [11,12,13,14,15,16,17,18]

上一篇
[想試試看JavaScript ] 陣列一些操作陣列好用的方法 forEach
下一篇
[想試試看JavaScript ] 陣列一些操作陣列好用的方法 reduce
系列文
想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言